<template>
  <div class="Orders">
    <!-- 1、面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 2、卡片： 主要列表区域 -->
    <el-card>
        <!-- 第一行：搜索框和按钮 -->
        <el-row :gutter="10">
            <el-col :span="10">
              <!-- Clearable属性是指输入内容可清空，点击清空触发一个事件 clear -->
                <el-input placeholder="请输入搜索内容" v-model="queryInfo.query" @clear="clearAndsearchOrders" :clearable="true">
                    <el-button slot="append" icon="el-icon-search" @click="searchOrders"></el-button>
                </el-input>
            </el-col>
        </el-row>
        <el-table :data="OrdersList" border style="width: 100%" @expand-change="getOrdersDetails">
          <!-- 索引列 -->
          <el-table-column type="index" width="50px" label="#"></el-table-column>
          <!-- 扩展列 -->
          <el-table-column type="expand" width="50px">
            <template slot-scope="scope">
              <h3>{{scope.row.order_id}}-订单详情: </h3>
              <el-form>
                <el-form-item label="订单号">
                  <span>{{ OrdersDetails.order_id }}</span>
                </el-form-item>
                <el-form-item label="用户id">
                  <span>{{ OrdersDetails.user_id }}</span>
                </el-form-item>
                <el-form-item label="订单编号">
                  <span>{{ OrdersDetails.order_number }}</span>
                </el-form-item>
                  <div v-for="item in OrdersDetails.goods" :key="item.id" style="margin-left:30px">
                    <el-form-item>
                        <span>******************************</span>
                    </el-form-item>
                    <el-form-item label="商品id">
                      <span>{{ item.goods_id }}</span>
                    </el-form-item>
                    <el-form-item label="商品价格">
                      <span>{{ item.goods_price}}</span>
                    </el-form-item>
                    <el-form-item label="商品数量">
                      <span>{{ item.goods_number }}</span>
                    </el-form-item>
                    <el-form-item label="商品总价">
                      <span>{{ item.goods_total_price }}</span>
                    </el-form-item>
                  </div>
              </el-form>
              <pre>{{OrdersDetails}}</pre>
            </template>
          </el-table-column>
          <!-- 有数据源的4列 -->
          <el-table-column prop="order_number" label="订单编号"></el-table-column>
          <el-table-column prop="order_price" label="订单价格" width="100px"></el-table-column>
          <el-table-column label="是否付款" width="100px">
            <template slot-scope="scope">
                <el-tag type="danger" v-if="scope.row.pay_status=='0'">未付款</el-tag>
                <el-tag type="success" v-if="scope.row.pay_status=='1'">已付款</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="is_send" label="是否发货" width="100px"></el-table-column>
          <el-table-column  label="下单时间" width="160px">
            <template slot-scope="scope">
               <span>{{ scope.row.create_time |dateFormat }}</span>
            </template>
          </el-table-column>
          <!-- 操作列 -->
          <el-table-column label="操作" width="120px">
            <template slot-scope="scope">
              <el-tooltip effect="dark" content="修改地址" placement="top" :enterable="false">
                <el-button type="primary" icon="el-icon-edit" @click="EditAdressDialog(scope.row)" size="small"></el-button>
              </el-tooltip>
              <el-tooltip effect="dark" content="物流进度" placement="top" :enterable="false">
                <el-button type="success" icon="el-icon-location" @click="ProcessDialog" size="small"></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>

        <!-- 第三行 :分页区域 ： 把参数填进去，自动根据用户列表数据根据下面的参数分为几页，这个分页组件很好用。 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pagenum"
          :page-sizes="[3, 5, 8,10,15]"
          :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="OrdersTotal">
        </el-pagination>
    </el-card>

    <!-- 3.0 对话框 -->
    <!-- 物流进度对话框 -->
     <el-dialog 
        title="物流信息" 
        :visible.sync="ProcessDialogIsVisible" 
        width="50%">
        <!-- 对话框关闭时触发close的事件函数： 重置表单：关闭对话框时和点击充值按钮时 -->
        <!-- 表单 -->
        <el-form v-model="ProcessDeTails">
          <el-form-item>{{ProcessDeTails}}</el-form-item>
        </el-form>
    </el-dialog>
    
  </div>
</template>

<script>
export default {
    data(){
       return {
        // 获取订单数据列表的对象
        queryInfo:{
          // 查询参数
          query:'',
          // 当前所处页码
          pagenum:1,
          // 每页显示条数
          pagesize:3,
          // 用户Id
          // user_id:'',
          // // 支付状态
          // pay_status:'',
          // // 是否发货
          // is_send:'',
          // // ['个人','公司']
          // order_fapiao_title:'',
          // // 公司名称
          // order_fapiao_company:'',
          // // 发票内容
          // order_fapiao_content:'',
          // // 发货地址
          // consignee_addr:''
        },
        // 获取到的订单总数
        OrdersTotal:0,
        // 获取到的订单数据
        OrdersList:[
          // {
          //   consignee_addr: "",
          //   create_time: 1512535620,
          //   is_send: "否",
          //   order_fapiao_company: "",
          //   order_fapiao_content: "",
          //   order_fapiao_title: "个人",
          //   order_id: 68,
          //   order_number: "itcast-g7kmck725jaujgdts",
          //   order_pay: "0",
          //   order_price: 40,
          //   pay_status: "0",
          //   trade_no: "",
          //   update_time: 1512535620,
          //   user_id: 1,
          // }
        ],

        // 订单详情
        OrdersDetails:{},

        //修改地址对话框是否显示
        EditAdressDialogIsVisible:false,
        // 地址信息
        AdressInfo:{},

        //物流进度对话框是否显示
        ProcessDialogIsVisible:false,
        //物流信息
        ProcessDeTails:[],
       }
    },
    methods:{
      // 获取订单列表数据
      async getOrdersList(){
        const res = await this.$http.get('orders',{ params:this.queryInfo });
        console.log('订单列表：',res.data.data);
        if(res.data.meta.status!==200)  return;

        this.OrdersTotal=res.data.data.total;
        this.OrdersList=res.data.data.goods;
      },
      // 点击清空输入框的内容，触发
      clearAndsearchOrders(){
        this.getOrdersList();
      },
      // 点击搜索按钮
      searchOrders(){
        this.getOrdersList();
      },
      // 每页显示数据条数发生改变
      handleSizeChange(newSize){
        this.queryInfo.pagesize=newSize;
        this.getOrdersList();
      },
      // 当前页码发生改变
      handleCurrentChange(newPage){
        this.queryInfo.pagenum=newPage;
        this.getOrdersList();
      },

      // 查看某订单详情
      async getOrdersDetails(row){
          const res = await this.$http.get('orders/'+row.order_id);
          // console.log(row.order_id,'-订单详情:',res.data.data);
          if(res.data.meta.status!=200) return ;

          this.OrdersDetails=res.data.data;
      },

      // 打开物流进度对话框，获取物流信息
      async ProcessDialog(){
          this.ProcessDialogIsVisible=true;
          // const res = await this.$http.get('/kuaidi/804909574412544580');
          // if(res.data.meta.status!=200) return;
          // this.ProcessDeTails=res.data.data;
          // console.log('物流：',res.data);
      },


    },
    created(){
      this.getOrdersList();
    }
}
</script>

<style scoped>
  .el-card {
    width: 100%;
    margin-top: 10px;
    box-shadow: 0px 0px 3px skyblue;
    background-color: #fff;
  }
  /* 输入框和按钮所在盒子的宽度 */
  .el-table{
    margin-top: 15px;
    font-size: 13px;
  }
  .el-form-item{
    height: 18px;
  }
</style>